<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>培训报名</title>
    <link rel="stylesheet" href="/rzwl/enroll/index.css">
    <link rel="stylesheet" href="/rzwl/components/tabbar/index.css">
    <script src="/rzwl/static/js/axios.min.js"></script>
</head>
<body>
    <div id="enroll_app" style="padding-left: 20px; padding-right: 20px;">
        <div class="header">
            <div class="title" style="align-content: center;">金融AI千人工程先锋营</div>
            <div class="subtitle" v-if="userInfo">请填写以下信息完成报名</div>
        </div>
        <div class="tabs">
            <div :class="{ 'tab-item': true, 'active': currentTab === 'individual' }" @click="currentTab = 'individual'">个人报名</div>
            <div :class="{ 'tab-item': true, 'active': currentTab === 'group' }" @click="currentTab = 'group'">团体报名</div>
        </div>

        <div v-if="currentTab === 'individual'">
            <div v-if="userInfo" class="content">
                <div class="form-section">
                    <div class="form-item">
                        <div class="form-row">
                            <div class="form-label required">姓名</div>
                            <input class="form-input" placeholder="请输入您的姓名" v-model="formData.name" @input="onInputChange('name')" />
                        </div>
                        <div class="error-tip" v-if="errors.name">[[errors.name]]</div>
                    </div>
                    
                    <div class="form-item">
                        <div class="form-row">
                            <div class="form-label required">单位</div>
                            <input class="form-input" placeholder="请输入您的单位" v-model="formData.company" @input="onInputChange('company')" />
                        </div>
                        <div class="error-tip" v-if="errors.company">[[errors.company]]</div>
                    </div>
                    
                    <div class="form-item">
                        <div class="form-row">
                            <div class="form-label required">岗位</div>
                            <input class="form-input" placeholder="请输入您的岗位" v-model="formData.position" @input="onInputChange('position')" />
                        </div>
                        <div class="error-tip" v-if="errors.position">[[errors.position]]</div>
                    </div>
                    
                    <div class="form-item">
                        <div class="form-row">
                            <div class="form-label required">电话</div>
                            <input class="form-input" type="tel" placeholder="请输入您的电话" v-model="formData.phone" @input="onInputChange('phone')" maxlength="11" />
                        </div>
                        <div class="error-tip" v-if="errors.phone">[[errors.phone]]</div>
                    </div>
                    
                    <div class="form-item">
                        <div class="form-row">
                            <div class="form-label">邮箱</div>
                            <input class="form-input" placeholder="请输入您的邮箱" v-model="formData.email" @input="onInputChange('email')" />
                        </div>
                        <div class="error-tip" v-if="errors.email">[[errors.email]]</div>
                    </div>
                    <!-- 隐藏字段：培训班名称 -->
                    <input type="hidden" v-model="formData.training_class_name" value="金融AI千人工程先锋营" />
                    <input type="hidden" v-model="formData.openid" />  
                </div>

                <div class="form-section">
                    <div class="form-item form-row" style="justify-content: space-between;">
                        <div class="form-label">价格：￥[[ displayPrice ]]元</div>
                        <div class="checkbox-container">
                            <input type="checkbox" id="memberCheckbox" v-model="isMember" />
                            <label for="memberCheckbox">会员单位及联盟成员</label>
                        </div>
                    </div>
                </div>
                <div 
                    class="pre-wrap-class" 
                    style="text-align: center; color: red; margin-top: 10px; margin-bottom: 10px;" 
                    v-if="countdownDays > 0"
                >[[ countdownMessage ]]
                </div>
                
                <!-- 提交按钮 -->
                <div class="form-button-area">
                    <button class="submit-button" @click="handleSubmit" :disabled="submitting">
                        <span v-if="!submitting">提交报名</span>
                        <span v-else>提交中...</span>
                    </button>
                </div>
            </div>
            <div v-else class="login-prompt">
                <p>请登录以进行报名操作</p>
                <button @click="redirectToWechatAuth" class="wechat-login-button">微信登录</button>
            </div>
        </div>

        <div v-if="currentTab === 'group'" class="content">
            <div class="group-enroll-section">
                <h3 style="text-align: center; margin-bottom: 20px;">团体报名说明</h3>
                <p>请点击“团体报名表”链接下载表格，填写后发送电子邮件至 <a href="mailto:lsj@rzwl2024.com" style="color: #007bff; text-decoration: underline;">lsj@rzwl2024.com</a>。</p>
                <p style="margin-top: 20px;">报名表下载：<a href="https://ai.szfta.org.cn/rzwl/static/docs/金融AI千人工程先锋营（第一期）团体报名表.xlsx" style="color: #007bff; text-decoration: underline;" download>金融AI千人工程先锋营（第一期）团体报名表.xlsx</a>。</p>
            </div>
            <div class="group-enroll-section">
                <h3 style="text-align: center; margin-top: 40px; margin-bottom: 20px;">价格说明</h3>
                <p style="text-align: left;">早鸟价：3599元</p>
                <p style="text-align: left;">会员单位/联盟成员：1799元</p>
                <div 
                    class="pre-wrap-class" 
                    style="text-align: left; color: red; margin-top: 10px; margin-bottom: 10px;" 
                    v-if="countdownDays > 0"
                >[[ countdownMessage ]]
                </div>
            </div>
            <div class="group-enroll-section">
                <h3 style="text-align: center; margin-top: 40px; margin-bottom: 20px;">转账信息</h3>
                <p>户名：深圳融智未来科技有限公司</p>
                <p>账号：86021110000705609</p>
                <p>开户行：宁波银行股份有限公司深圳梅林支行</p>
                <p>联系人：李女士 18851254079</p>
            </div>
        </div>

        <!-- 提交成功弹窗 -->
        <div class="success-modal" :class="{ 'show': showSuccessModal }">
            <div class="modal-content">
                <i class="fas fa-check-circle" style="font-size: 64px; color: #07c160;"></i>
                <div class="modal-title">报名成功</div>
                <div class="modal-message">您的报名信息已提交成功，我们会尽快与您联系确认详情。</div>
                <button class="modal-button" @click="closeSuccessModal">确定</button>
            </div>
        </div>

        <!-- 报名成功后的只读信息展示和支付按钮 -->
        <div v-if="enrollmentSuccessData" class="enrollment-summary">
            <h2>您的报名信息</h2>
            <div class="info-item">
                <span class="info-label">姓名:</span>
                <span class="info-value">[[ enrollmentSuccessData.name ]]</span>
            </div>
            <div class="info-item">
                <span class="info-label">单位:</span>
                <span class="info-value">[[ enrollmentSuccessData.company ]]</span>
            </div>
            <div class="info-item">
                <span class="info-label">岗位:</span>
                <span class="info-value">[[ enrollmentSuccessData.position ]]</span>
            </div>
            <div class="info-item">
                <span class="info-label">电话:</span>
                <span class="info-value">[[ enrollmentSuccessData.phone ]]</span>
            </div>
            <div class="info-item" v-if="enrollmentSuccessData.email">
                <span class="info-label">邮箱:</span>
                <span class="info-value">[[ enrollmentSuccessData.email ]]</span>
            </div>
            <div class="info-item">
                <span class="info-label">培训班:</span>
                <span class="info-value">[[ enrollmentSuccessData.training_class_name ]]</span>
            </div>
            <div class="info-item">
                <span class="info-label">订单ID:</span>
                <span class="info-value">[[ enrollmentSuccessData.order_id ]]</span>
            </div>
            <button class="pay-now-button" @click="goToPayPage">马上支付</button>
        </div>

        <tabbar-component></tabbar-component>
    </div>

    <script>
        window.WECHAT_APP_ID = "{{ APP_ID }}";
        window.PRICE = "{{ PRICE }}"; // 将PRICE传递给前端
        window.PRICE_MEMBER = "{{ PRICE_MEMBER }}"; // 将PRICE_MEMBER传递给前端
    </script>
    <script src="/rzwl/static/vue@2.6.14/dist/vue.min.js"></script>
    <script src="/rzwl/components/tabbar/index.js"></script>
    <script src="/rzwl/enroll/index.js"></script>
</body>
</html>
